<template>
  <div class="main-tabs">
    <div class="tabs-list">
      <ul ref="tabUl">
        <li class="tabs-li" :class="{'active': isActive(item.path)}" v-for="(item,index) in tabsList" :key="index">
          <router-link :to="item.path" class="tabs-li-title" :title="item.title">
            {{item.title}}
          </router-link>
          <span class="tabs-li-icon" @click="closeTags(index)">
              <i v-if="item.path != '/dashboard'" class="el-icon-close"></i>
          </span>
        </li>
      </ul>
    </div>
    <div class="tabs-option">
      <a href="javascript:;" @click="tabScrollLeft"><i class="el-icon-arrow-left"></i></a>
      <a href="javascript:;" @click="tabScrollRight"><i class="el-icon-arrow-right"></i></a>
      <el-dropdown @command="handleTabsCommand">
        <span class="el-dropdown-link">
          <i class="el-icon-more"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="closeOther">关闭其它</el-dropdown-item>
          <el-dropdown-item command="closeAll">关闭所有</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
  import bus from "@/utils/bus";
  export default {
    data() {
      return {
        step: 180,
        tabsList: [
          { title: "首页", path: "/dashboard", name: "dashboard"}
        ]
      }
    },
    methods: {
      isActive(path) {
        return path === this.$route.fullPath;
      },
      cleanScroll() {
        this.$refs.tabUl.style.left = '0px';
      },
      tabScrollLeft() {
        let nowLeft = window.getComputedStyle(this.$refs['tabUl']).left;
        nowLeft =  parseInt(nowLeft.replace('px',''));
        if(nowLeft <= -this.step){
          this.$refs.tabUl.style.left = (nowLeft + this.step) + 'px';
        }else if(nowLeft > -this.step && nowLeft < 0){
          this.$refs.tabUl.style.left = (nowLeft - nowLeft) + 'px';
        }else{
          return;
        }
      },
      tabScrollRight() {
        let nowLeft = window.getComputedStyle(this.$refs['tabUl']).left;
        nowLeft =  parseInt(nowLeft.replace('px',''));
        let domTabWidth = document.querySelector('.tabs-list').offsetWidth;
        let lastLiLeft = document.querySelector('.tabs-list ul li:last-child').offsetLeft;
        let lastLiWidth = document.querySelector('.tabs-list ul li:last-child').offsetWidth;
        let distance = lastLiLeft + lastLiWidth - domTabWidth;
  //      console.log('domTabWidth:',domTabWidth);
  //      console.log('lastLiLeft:',lastLiLeft);
  //      console.log('lastLiWidth:',lastLiWidth);
  //      console.log('distance:',distance);

        if(distance > 0 && -nowLeft < distance){
          if(distance + nowLeft > this.step){
            this.$refs.tabUl.style.left = nowLeft - this.step + 'px';
          }else if(distance + nowLeft < this.step){
            this.$refs.tabUl.style.left = nowLeft - (distance + nowLeft) - 5 + 'px';
          }
        }else {
          return;
        }
      },
      // 关闭单个标签
      closeTags(index) {
        const delItem = this.tabsList.splice(index, 1)[0];
        const item = this.tabsList[index] ? this.tabsList[index] : this.tabsList[index - 1];
        if (item) {
          delItem.path === this.$route.fullPath && this.$router.push(item.path);
        }else{
          this.$router.push('/');
        }
      },
      //
      handleTabsCommand(command){
        // 关闭所有标签
        if('closeAll' === command){
          const homeItem = this.tabsList.filter(item => {
            return (item.path === '/dashboard');
          });
          this.tabsList = homeItem;
          this.cleanScroll();
          // this.tabsList = [];
          this.$router.push('/');
        }
        // 关闭其它标签
        else if('closeOther' === command){
          const curItem = this.tabsList.filter(item => {
            return (item.path === this.$route.fullPath) || (item.path === '/dashboard');
          })
          this.tabsList = curItem;
          this.cleanScroll();
        }
      },
      // 设置标签
      setTags(route){
        // 标签栏超过10个则不允许再打开
        if(this.tabsList.length > 9){
          return
        }
        const isExist = this.tabsList.some(item => {
          return item.path === route.fullPath;
        });
        if(!isExist){
          this.tabsList.push({
            title: route.meta.title,
            path: route.fullPath,
            name: route.matched[1].components.default.name
          });
          //this.tabScrollRight();
        }
        bus.$emit('tabs', this.tabsList);
      }
    },
    watch:{
      $route(newValue, oldValue){
          this.setTags(newValue);
      }
    },
    created(){
      this.setTags(this.$route);

      bus.$on('close_current_tags', () => {
        for (let i = 0, len = this.tabsList.length; i < len; i++) {
          const item = this.tabsList[i];
          if(item.path === this.$route.fullPath){
            if(i < len - 1){
              this.$router.push(this.tabsList[i+1].path);
            }else if(i > 0){
              this.$router.push(this.tabsList[i-1].path);
            }else{
              this.$router.push('/');
            }
            this.tabsList.splice(i, 1);
          }
        }
      })
    }
  }
</script>
<style>
  .main-tabs{
    width: 98%;
    margin: 0px auto;
    height: 36px;
    box-sizing: border-box;
    border-bottom: 1px solid #DDDDDD;
  }
  .tabs-list{
    float: left;
    width: 90%;
    height: 36px;
    position: relative;
    overflow: hidden;
    /*overflow-x: auto;*/
    white-space:nowrap;
  }
  .tabs-option{
    width: 10%;
    float: left;
    text-align: center;
    height: 36px;
    line-height: 36px;
  }
  .tabs-list ul{
    position: absolute;
    width: 200%;
    left: 0px;
    transition: left 0.2s linear;
  }
  .tabs-li{
    float: left;
    background: #FFFFFF;
    margin: 0px 5px;
    padding : 0px 5px 0px 15px;
    cursor: pointer;
    height: 36px;
    line-height: 36px;
    box-sizing: border-box;
    border: 1px solid #DDDDDD;
    border-radius: 5px 5px 0px 0px;
  }

  .tabs-li.active {
    border-bottom: none;
  }

  .tabs-li.active a{
    color: #409EFF !important;
  }

  .tabs-li .tabs-li-icon{
    float: left;
    display: inline-block;
    padding-left: 10px;
    color: #000000;
  }

  .tabs-li.active .tabs-li-icon{
    color: #409EFF !important;
  }

  .tabs-li-title{
    float: left;
    display: inline-block;
    max-width: 160px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .tabs-option .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .tabs-option a{
    color: #409EFF;
  }
</style>

